<template>
  <div class="flex-row autoGrow chatContainer">
    <choose-service-account
      :multiple="true"
      @serviceChange="serviceChange"
    >
    </choose-service-account>
    <div class="chartsData flex-column autoGrow">
      <div class="chartTitle flex-row">
        <div class="subTitle">今日数据</div>
        <div>
          <span>截止到 {{chartsData.date}} </span>
          <span class="clickedSpan" @click="reloadData">刷新</span>
        </div>
      </div>
      <div class="chartProfile flex-row">
        <div class="flex-column profileItem">
          <span>好友数</span>
          <span>{{chartsData.friendsCount}}</span>
        </div>
        <div class="flex-row profileItem">
          <div class="flex-column leftProfile">
            <span>新增好友</span>
            <span>{{chartsData.addCount}}</span>
          </div>
          <div class="insideItem flex-column">
            <div class="borderBt">主动添加 {{chartsData.activeAdd}}</div>
            <div>被动添加 {{chartsData.passiveAdd}}</div>
          </div>
        </div>
        <div class="flex-row profileItem">
          <div class="flex-column leftProfile">
            <span>会话数</span>
            <span>{{chartsData.chatCount}}</span>
          </div>
          <div class="insideItem flex-column">
            <div class="borderBt">群回复 {{chartsData.groupReply}}</div>
            <div>私聊 {{chartsData.friendReply}}</div>
          </div>
        </div>
        <div class="flex-row profileItem">
          <div class="flex-column leftProfile">
            <span>消息数</span>
            <span>{{chartsData.messageCount}}</span>
          </div>
          <div class="insideItem flex-column">
            <div class="borderBt">群消息数 {{chartsData.groupMessage}}</div>
            <div>私聊消息数 {{chartsData.friendMessage}}</div>
          </div>
        </div>
      </div>
      <div class="chartHeader flex-row">
        <div class="subTitle">每日会话统计</div>
        <div :class="['range', range=='30' && 'active']" @click="changeChartRange('30')">30天</div>
        <div :class="['range', range=='15' && 'active']" @click="changeChartRange('15')">15天</div>
        <div :class="['range', range=='7' && 'active']" @click="changeChartRange('7')">7天</div>
        <div class="layui-inline time flex-row">
          <label class="layui-form-label">时&emsp;间</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="charts" id="chartContainer">
      </div>
      <div class="tableHeader flex-row">
        <div class="subTitle">数据报表</div>
        <span class="clickedSpan" @click="exportTable">导出表格</span>
      </div>
      <table class="layui-table autoGrow">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>日期</th>
            <th>客服账号数量</th>
            <th>每日新增好友数</th>
            <th>每日消息总数</th>
            <th>每日会话数</th>
            <th>每日活跃用户百分比</th>
          </tr>
        </thead>
        <tbody v-if="tableData">
            <tr v-for="(item, i) in tableData" :key="i">
              <td>{{item.date}}</td>
              <td>{{item.serviceCount}}</td>
              <td>{{item.newFriendCount}}</td>
              <td>{{item.messageCount}}</td>
              <td>{{item.chatCount}}</td>
              <td>{{item.activePercentage}}%</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import ChooseServiceAccount from '@/components/chooseServiceAccount'
import echarts from 'echarts'
import {mapMutations} from 'vuex'

export default {
  name: 'groupStatistic',
  data() {
    return {
      services: null,
      range: '30',
      chartsData: {
        date: '2019.09.01 20:00',
        friendsCount: 324,
        addCount: 21,
        activeAdd: 10,
        passiveAdd: 11,
        chatCount: 764,
        groupReply: 452,
        friendReply: 123,
        messageCount: 852,
        groupMessage: 214,
        friendMessage: 542,
        xAxis: [],
        seriesData: []
      },
      tableData: [],
      charts: null,
      option: {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['全部消息数','私聊发出','私聊接收','群聊发出','群聊接收'],
            bottom: '0%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            interval: 500
        },
        series: [
            {
                name:'全部消息数',
                type:'line',
                itemStyle: {
                  color: '#f98c17'
                },
                data:[]
            },
            {
                name:'私聊发出',
                type:'line',
                itemStyle: {
                  color: '#3876e8'
                },
                data:[]
            },
            {
                name:'私聊接收',
                type:'line',
                itemStyle: {
                  color: '#3876e8'
                },
                data:[]
            },
            {
                name:'群聊发出',
                type:'line',
                itemStyle: {
                  color: '#52c41a'
                },
                data:[]
            },
            {
                name:'群聊接收',
                itemStyle: {
                  color: '#52c41a'
                },
                type:'line',
                data:[]
            }
        ]
      },
    }
  },
  mounted() {
    let initDate = '2019.09.' , seriesData = [[],[],[],[],[]]
    for (let i=0; i<30; i++) {
      this.chartsData.xAxis.push(`${initDate}${1+i}`);
      this.tableData.push({
        date: `${initDate}${1+i}`,
        serviceCount: parseInt(Math.random() * 10),
        newFriendCount: parseInt(Math.random() * 100),
        messageCount: parseInt(Math.random() * 2000),
        chatCount: parseInt(Math.random() * 1000),
        activePercentage: parseFloat(Math.random() * 100).toFixed(2),
      })
      seriesData[0].push(parseInt(Math.random()*1000))
      seriesData[1].push(parseInt(Math.random()*500))
      seriesData[2].push(parseInt(Math.random()*500))
      seriesData[3].push(parseInt(Math.random()*600))
      seriesData[4].push(parseInt(Math.random()*400))
    }
    this.chartsData.seriesData = seriesData
    this.charts = echarts.init(document.getElementById('chartContainer'));
    this.getChartsData(this.range)
  },
  components: {
    ChooseServiceAccount
  },
  methods: {
    ...mapMutations(['changeGroupStatus','dismissGroup']),
    serviceChange(services) {
      this.services = services
      this.getChartsData(this.range)
    },
    changeChartRange(range) {
      this.range = range
      this.getChartsData(range)
    },
    getChartsData(range) {
      if (!this.services || !this.services.length) return
      range = Number(range)
      let start = 30 - range
      this.option.xAxis.data = this.chartsData.xAxis.slice(start, 30)
      this.option.series = this.option.series.slice(start, 30).map((s, index)=>{
        const data = this.chartsData.seriesData[index]
        s.data = data
        return s
      })
      this.charts.setOption(this.option)
    },
    reloadData() {

    },
    exportTable() {

    }
  }
}
</script>

